<template>
    <div>
      <Breadcrumb title1="权限管理" title2="角色列表" class="container"/>
      <el-card class="box-card">
        <!-- 按钮 -->
        <div class="button-item">
          <el-button type="primary" @click="handleAdd">新增角色</el-button>
        </div>
        <!-- 权限列表 -->
        <el-table
          :data="RolesList"
          style="width: 100%"
          border
          stripe
          header-align="center"
        >
          <el-table-column type="expand" align="center" width="50">
            <template slot-scope="scope">
              <el-row :class="['bottombd', 'flexCenter', i === 0 ? 'topbd' : '' ]" v-for="(item, i) in scope.row.children" :key="item.id">
                <!-- 一级权限 -->
                <el-col :span="5">
                  <el-tag closable @close="handleColse(scope.row, item.id)">
                    {{ item.authName }}
                  </el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <!-- 二级权限 -->
                <el-col :span="19">
                  <el-row :class="['flexVvcenter', i1 === item.children.length - 1 ? '' : 'bottombd']" v-for="(child, i1) in item.children" :key="child.id">
                    <el-col :span="6">
                      <el-tag type="success" closable @close="handleColse(scope.row, child.id)">
                        {{ child.authName }}
                      </el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 三级权限 -->
                    <el-col :span="18">
                      <el-tag closable type="warning" v-for="grandson in child.children" :key="grandson.id" @close="handleColse(scope.row, grandson.id)">
                        {{ grandson.authName }} {{ grandson.id }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column align="center" label="ID" width="50" type="index" />
          <el-table-column
            label="角色名称"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.roleName }}</template>
          </el-table-column>
          <el-table-column
            label="角色描述"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.roleDesc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain round>编辑</el-button>
              <el-button size="mini" type="danger" plain round @click="handleDeleteRole(scope.row.id)">删除</el-button>
              <el-button size="mini" type="warning" plain round @click="assignmentPower(scope.row)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
        <!-- 弹窗 -->
      <el-dialog
        title="分配权限"
        :visible.sync="dialogVisible"
        width="30%"
        @close="clearKeys"
      >
      <!-- 树形控件 -->
        <el-tree
          :data="dataList"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="keysList"
          :props="treeList"
        >
        </el-tree>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { getRolesList, deleteRole } from '@/api/roles'
import { getPowerList, deletePower } from '@/api/power'
import Breadcrumb from '@/components/Breadcrumb'
export default {
  name: 'RolesList',
  components: {
    Breadcrumb
  },
  data () {
    return {
      RolesList: [],
      dialogVisible: false,
      dataList: [],
      // 树形控件属性
      treeList: {
        label: 'authName',
        children: 'children'
      },
      // 默认选中的权限
      keysList: []
    }
  },
  created () {
    this.getAllRoleList()
    this.getPowersList()
  },
  methods: {
    // 获取用户角色列表
    async getAllRoleList () {
      try {
        const res = await getRolesList()
        // 传入一整行，偏于后面函数复用
        this.RolesList = res.data
        console.log(this.RolesList)
      } catch (error) {
        console.log(error)
      }
    },
    // 新增角色
    handleAdd () {
      console.log('新增角色')
    },
    // 删除权限
    async handleColse (roles, authId) {
      const result = await this.$confirm('此操作将永久删除该用户权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        return false
      })
      if (result) {
        const res = await deletePower(roles.id, authId)
        console.log(res)
        roles.children = res.data
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }
    },
    // 获取树形控件数据
    async getPowersList () {
      try {
        //  list 列表显示权限
        const { data } = await getPowerList('tree')
        this.dataList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 删除用户角色
    async handleDeleteRole (id) {
      const result = await this.$confirm('此操作将永久删除该用户权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        return false
      })
      if (result) {
        const res = await deleteRole(id)
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getAllRoleList()
      }
    },
    // 分配权限
    assignmentPower (row) {
      this.getKeys(row, this.keysList)
      this.dialogVisible = true
    },
    // 判断是否为三级权限并且加入到数组中
    getKeys (node, arr) {
      if (!node.children) {
        return arr.push(node.id)
      }
      // 函数返回id数组
      node.children.forEach((item) => this.getKeys(item, arr))
    },
    clearKeys () {
      console.log(this.keysList)
      this.keysList = []
      console.log(this.keysList)
    }
  }
}

</script>

<style lang="scss" scoped>
.button-item {
  padding-bottom: 20px;
}
.container {
  padding: 20px;
}
.el-tag {
  margin: 10px 0;
  margin-left: 20px;
}
.bottombd {
  border-bottom: 1px solid #e4e4e4;
}
.bottombdnone {
  border-bottom: none;
}
.topbd {
  border-top: 1px solid #e4e4e4;
}
.topbdnone {
  border-top: none;
}
</style>
